<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">

        #app{
            width:500px;
            margin: 150px auto;
        }

        #main {
            background-image: url(image/user_forgotpsd_background.jsp.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }

    </style>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<html id="main">


<div id="app">
    <h1 style="margin-left: 220px ;">找回密码</h1>
    <el-form :model="userInfo" :rules="rules" status-icon ref="userInfo" label-width="100px" class="demo-userInfo">

        <el-form-item label=" 手机号:" prop="telephone">
            <el-input  type="text"  maxlength="11" style="width:100%;" placeholder="请输入手机号" autocomplete="off"
                       v-model="userInfo.telephone" v-on:blur="checkPhone()"  onkeyup="this.value=this.value.replace(/\D/g,'')">
                <template slot="append">
                    <el-button type="primary" plain style="display: inline-block;"  :disabled="disabled=!show" @click="sendCode()">
                        <span v-show="show">获取验证码</span>
                        <span v-show="!show" class="count">{{count}} s后重新发送</span>
                    </el-button>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label=" 验证码:" prop="code">
            <el-input type="text" placeholder="请输入验证码" autocomplete="off" v-model="userInfo.code"> </el-input>
        </el-form-item>

        <el-form-item label="  密码：" prop="password">
            <el-input type="password" v-model="userInfo.password"  placeholder="请输入密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="checkPass">
            <el-input type="password" v-model="userInfo.checkPass" placeholder="请确认密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item style="text-align:center  ">
            <el-button type="primary" @click="forgotPsd('userInfo')">提交</el-button>
            <el-button @click="resetForm('userInfo')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<body>
<script type="text/javascript">
    var validatePassword = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请输入密码'));
        } else {
            if (haha.userInfo.checkPass !== '') {
                haha.$refs.userInfo.validateField('checkPass');
            }
            callback();
        }
    };
    var validatePass2 = (rule, value, callback) => {
        if (value === '') {
            callback(new Error('请再次输入密码'));
        } else if (value !== haha.userInfo.password) {
            callback(new Error('两次输入密码不一致!'));
        } else {
            callback();
        }
    };
    var haha = new Vue({
        el: "#app",
        data: {
            show: true,
            count: "", // 初始化次数
            timer: null,
            userInfo: {
                password: '',
                checkPass: '',
                telephone: ''
            },
            rules: {

                telephone: [{
                    required: true,
                    message: '请输入11位手机号',
                    trigger: 'blur'
                },
                    {
                        pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                        message: '请输入正确电话号码',
                        trigger: 'blur'
                    }
                ],
                code:[{
                    required: true,
                    message: '请输入验证码',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    validator: validatePassword,
                    trigger: 'blur'
                }],
                checkPass: [{
                    required: true,
                    validator: validatePass2,
                    trigger: 'blur'
                }],

            }
        },
        methods: {
            sendCode:function(){

                    const TIME_COUNT = 60; //更改倒计时时间
                    if (!haha.timer) {
                        haha.count = TIME_COUNT;
                        haha.show = false;
                        haha.timer = setInterval(() => {
                            if (haha.count > 0 && haha.count <= TIME_COUNT) {
                                haha.count--;
                            } else {
                                haha.show = true;
                                clearInterval(haha.timer); // 清除定时器
                                haha.timer = null;
                            }
                        }, 1000);
                    }

                    $.post("/cai/consumer/checkPhone",haha.userInfo,function (backData) {
                        if (backData.code == 2) {
                            haha.$notify({
                                title: '温馨提示',
                                message: backData.msg,
                                type: 'error'
                            });
                        } else   if(backData.code== 1){
                            $.post("/cai/consumer/sendCode",haha.userInfo,function (backData) {

                                haha.$notify({
                                    title: '温馨提示',
                                    message: backData.msg,
                                    type: 'success'
                                });

                            })
                        }else if(backData.code==2){
                            $.post("/cai/consumer/sendCode",haha.userInfo,function (backData) {
                                haha.$notify({
                                    title: '温馨提示',
                                    message: backData.msg,
                                    type: 'error'
                                });
                            })
                        }
                    });


            },
            checkPhone:function(){
                $.post("/cai/user/checkPhone",haha.userInfo,function (backData) {
                    if (backData.code==2) {
                        haha.$notify.error({
                            title: '错误',
                            message: backData.msg,

                        });
                    //     } else if (backData.code==1) {
                    //             haha.$notify({
                    //             title: '成功',
                    //             message: backData.msg,
                    //             type: 'sucess'
                    //         });
                    }

                });
            },
            /*submitForm(formName) {
                haha.$refs[(formName)].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },*/
            resetForm:function() {
                haha.$refs["userInfo"].resetFields();
            },
            forgotPsd: function() {
                haha.$refs["userInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/user/forgotPsd", haha.userInfo, function(backData) {
                            if (backData.code == 1) {
                                haha.$notify({
                                    title: '温馨提示',
                                    message: backData.msg,
                                    type: 'success'
                                });
                                window.location.href="/cai/userLogin.html";
                            } else if (backData.code == 2) {
                                haha.$notify.error({
                                    title: '温馨提示',
                                    message: backData.msg
                                });
                            }
                        });
                    }
                });
            }
        }
    });
</script>
</body>
</html>